<template>
  <div class="app-container app-container-next app-container-detail">
    <el-card class="box-card site" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'series-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row style="margin-top: 20px" v-loading="loadingPic">
        <el-col :span="24">
          <el-form ref="seriesForm" :model="series" :rules="rules" label-width="120px">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="series.name" placeholder="请输入系列名称" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="图片：" prop="icon" class="no-border pic">
              <ele-form-upload-plus-file v-model="series.icon" title="图片"/>
              <b style="color: #F56C6C">建议尺寸：1080*600px</b>
            </el-form-item>
            <div class="collection sorting-panel">
              <div class="collection-header">
                <div class="collection_bottom">
                  <div class="collection_bottom_operator">
                    <span class="title">专辑商品（{{ series_spu_list.length }}）</span>
                    <el-button v-if="series.seriesType === 'automatic'" type="primary"
                               @click="handleOpenDraw('smartFormVisible')">智能添加
                    </el-button>
                    <el-button v-if="series.seriesType === 'manual'" type="primary"
                               @click="handleOpenDraw('drawer1Visible')">手动添加
                    </el-button>
                  </div>
                  <div class="in" v-show="series_spu_list.length">
                    <span style="font-size: 16px;margin-right: 20px">排序</span>
                    <el-select v-model="series.spuSortType" placeholder="请选择" class="inline-item"
                               @change="changeSpuSort">
                      <el-option label="手动排序" value="handle_sort"/>
                      <el-option label="最近添加" value="createDate_DESC"/>
                      <el-option label="价格从低到高" value="sellPrice_ASC"/>
                      <el-option label="价格从高到低" value="sellPrice_DESC"/>
                      <el-option label="实际销量从高到低" value="salesQty_DESC"/>
                      <el-option label="虚拟销量从高到低" value="virtualSalesQty_DESC"/>
                    </el-select>
                  </div>
                </div>

                <div class="collection_bottom_search" v-if="series_spu_list.length">
                  <div style="display: flex;align-items: center">
                    <el-input v-model="filterGoodName" placeholder="请输入要搜索的商品名称/编号,多个值以','分割"
                              style="width: 320px; margin-right: 20px" clearable @clear="handleClearVal" @keyup.enter.native="handleSearch"></el-input>
                    <div style="display: flex;align-items: center">
                      <el-button size="small" type="primary" @click="handleSearch">搜索查询</el-button>
                      <el-button size="small" type="default" @click="handleRest">重置</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <drag-pic ref="dragSeries" v-show="drag_open && !searchModel" v-model="series_spu_list"
                        :seriesType="series.seriesType" @update="handleDragUpdate" :sticky="true"></drag-pic>
              <drag-pic v-show="drag_open && searchModel" v-model="searchGoods" :noDrag="true"
                        :seriesType="series.seriesType" @update="handleDragsearchGoodsUpdate"></drag-pic>
            </div>
            <el-form-item class="fixBottom">
              <el-button type="primary" @click="handleSubmit('seriesForm')" :loading="submitLoading">保存</el-button>
              <el-button @click="handleReset('seriesForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-drawer
        size="600px"
        title="智能添加"
        :wrapperClosable="false"
        :visible.sync="smartFormVisible"
        @close="closeSmartForm"
        class="region-setting-panel">
      <el-form ref="smartForm" :model="smart" label-width="120px" class="smart-form" label-position="top" style="padding: 0 12px">
        <el-form-item label="条件逻辑：" prop="ruleCondition" class="no-border">
          <el-radio-group v-model="smart.ruleCondition">
            <el-radio label="AND">全部条件</el-radio>
            <el-radio label="OR">任何条件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="智能添加：" class="hasWidth">
          <template v-for="(item, index) in smart.ruleList">
            <div :key="index" class="groups-conditions">
              <el-form-item class="item" :prop="'ruleList.' + index + '.ruleField'"
                            :rules="{required: true, message: '内容不能为空', trigger: 'blur'}">
                <el-select v-model="item.ruleField" placeholder="请选择" @change="item.operator = '';item.ruleValue = ''">
                  <el-option value="spuName" label="商品名称"></el-option>
                  <el-option value="spuType" label="商品类型"></el-option>
                  <el-option value="spuTag" label="商品标签"></el-option>
                  <el-option value="sellPrice" label="价格"></el-option>
                  <el-option value="weight" label="重量"></el-option>
                  <el-option value="salesQty" label="销量"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="item" :prop="'ruleList.' + index + '.operator'"
                            :rules="{required: true, message: '内容不能为空', trigger: 'blur'}">
                <el-select v-if="!item.ruleField || item.ruleField == ''" v-model="item.operator" placeholder="请选择">
                </el-select>
                <el-select v-if="item.ruleField == 'spuName'" v-model="item.operator" placeholder="请选择">
                  <el-option value="EQ" label="等于"></el-option>
                  <el-option value="NE" label="不等于"></el-option>
                  <el-option value="LIKE" label="包含"></el-option>
                </el-select>
                <el-select v-if="item.ruleField == 'spuType'" v-model="item.operator" placeholder="请选择">
                  <el-option value="EQ" label="等于"></el-option>
                  <el-option value="NE" label="不等于"></el-option>
                </el-select>
                <el-select v-if="item.ruleField == 'spuTag'" v-model="item.operator" placeholder="请选择">
                  <el-option value="LIKE" label="包含"></el-option>
                </el-select>
                <el-select v-if="item.ruleField == 'sellPrice'" v-model="item.operator" placeholder="请选择">
                  <el-option value="NE" label="不等于"></el-option>
                  <el-option value="EQ" label="等于"></el-option>
                  <el-option value="GT" label="大于"></el-option>
                  <el-option value="LT" label="小于"></el-option>
                </el-select>
                <el-select v-if="item.ruleField == 'weight'" v-model="item.operator" placeholder="请选择">
                  <el-option value="NE" label="不等于"></el-option>
                  <el-option value="EQ" label="等于"></el-option>
                  <el-option value="GT" label="大于"></el-option>
                  <el-option value="LT" label="小于"></el-option>
                </el-select>
                <el-select v-if="item.ruleField == 'salesQty'" v-model="item.operator" placeholder="请选择">
                  <el-option value="GT" label="大于"></el-option>
                  <el-option value="LT" label="小于"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="item" :prop="'ruleList.' + index + '.ruleValue'"
                            :rules="[{required: true, message: '内容不能为空', trigger: 'blur'},
                            {validator: checkNumber, trigger: 'blur'}]">
                <el-input v-model="item.ruleValue" placeholder="请输入" style="with:100%" v-if="item.ruleField !== 'spuType'">
                  <template slot="append" v-if="item.ruleField === 'sellPrice' || item.ruleField === 'weight'">
                    {{ item.ruleField === 'sellPrice' ? currencyType : item.ruleField === 'weight' ? 'g' : '' }}
                  </template>
                </el-input>
                <el-select v-else v-model="item.ruleValue" placeholder="请选择">
                  <el-option value="0" label="普通商品"></el-option>
                  <el-option value="1" label="定制商品"></el-option>
                </el-select>
              </el-form-item>
              <i class="el-icon-delete item" @click="removeSeriesRule(index)" v-if="smart.ruleList.length > 1"></i>
            </div>
          </template>
          <el-button type="default" @click="addSeriesRule"> 新增条件</el-button>
          <el-button type="primary" @click="saveSeriesRule('smartForm')"> 确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
        size="1000px"
        title="手动添加"
        :wrapperClosable="false"
        :visible.sync="drawer1Visible"
        class="region-setting-panel series-drawer">
      <div style="padding-bottom: 20px;overflow: hidden">
        <el-form ref="form" label-width="80px" style="padding: 0">
          <el-form-item class="el-form--inline" style="margin-left: -70px;margin-bottom: 10px">
            <el-select v-model="pageSearch.spuSeries" placeholder="请选择" style="width: 160px" @change="searchSpuInfo(true)">
              <el-option
                  v-for="item in seriesOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="pageSearch.spuType" placeholder="请选择" style="width: 160px">
              <el-option label="全部商品" value=""></el-option>
              <el-option label="普通商品" value="0"></el-option>
              <el-option label="定制商品" value="1"></el-option>
            </el-select>
            <el-input v-model="pageSearch.spuName" placeholder="商品名称" style="width: 220px" @keyup.enter.native="searchSpuInfo(true)"></el-input>
<!--            <el-select v-model="pageSearch.published" placeholder="请选择" style="width: 120px" @change="searchSpuInfo(true)">
              <el-option
                  v-for="item in publishStatus"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
              </el-option>
            </el-select>-->
            <el-input v-model="pageSearch.spuCode" placeholder="SPU编码,多个值以','分割" style="width: 220px" @keyup.enter.native="searchSpuInfo(true)"></el-input>
            <el-button type="primary" @click="searchSpuInfo(true)">搜索</el-button>
            <el-button @click="resetSearchInfo">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table size="small" :data="productList" style="width: 100%;" height="height: 500px" v-if="productList.length"
                  v-el-height-adaptive-table="fixOption" @select="handleSelectionChange" @select-all="handleSelectionChangeAll"
                  v-loading="tableLoading" v-loadmore="loadMore"
                  ref="multipleTable">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品图片" slot="append" width="100px" fixed='left' align='left'>
            <template slot-scope="{row}">
              <el-button type="text" size="mini">
                <el-image
                    style="width: 60px; height: 40px;"
                    :src="row.mainImage"
                    :preview-src-list="[row.mainImage]"
                    fit="contain"></el-image>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="spuName" label="商品名称" width="380" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="sellPrice" label="售价">
            <template slot-scope="{row}">
              <p>{{ row.sellPrice|currency('$') }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="publishText" label="上架状态"></el-table-column>
        </el-table>
        <div class="footer">
          <span
              style="font-weight: normal;margin-left: 12px;font-size: 14px">已选择{{ chooseProductList.length }}件商品</span>
          <el-button type="primary" @click="closeDrawerAndSaveData" :disabled="!this.chooseProductList.length">添加
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// import leaveMsg from '@/utils/common-mixins';
import dragPic from './dragPic';
import elHeightAdaptiveTable from '@/directives/el-table';
import {getAllSeriesSpuList, getSeries, modifySeries, getSortWhenOption, getSeriesPage} from '@/api/series';
import {getSpuPage} from '@/api/goods';
import {deepClone} from '@/utils/utils';
import {mapGetters} from 'vuex';

export default {
    name: 'series-detail',
    components: {dragPic},
    directives: {
        elHeightAdaptiveTable
    },
    data () {
        return {
            list1: [
                { name: 'John', id: 1 },
                { name: 'Joao', id: 2 },
                { name: 'Jean', id: 3 },
                { name: 'Gerard', id: 4 }
            ],
            submitLoading: false,
            fixOption: {fixedHeader: true, bottomOffset: 80},
            loadingPic: false,
            series: {
                siteId: this.siteId,
                id: this.$route.params.id,
                name: '',
                icon: '',
                sort: '',
                ruleCondition: '',
                spuSortType: 'createDate_DESC',
                seriesType: 'automatic',
                spuList: [],
                ruleList: []
            },
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            rules: {
                name: [
                    {required: true, message: '请输入系列名称', trigger: 'blur'}
                ],
                // sort: [
                //     {required: true, message: '请输入排序', trigger: 'blur'},
                //     {type: 'number', message: '只能输入整数', trigger: 'blur'}
                // ],
                ruleCondition: [
                    {required: true, message: '请设置条件逻辑', trigger: 'blur'}
                ]
            },
            checkNumber: (rule, value, callback) => {
                let index = parseInt(rule.field.split('.')[1]);
                let ruleField = this.smart.ruleList[index].ruleField;
                if (ruleField === 'sellPrice') {
                    let num = /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/;
                    value = '' + value;
                    if (isNaN(value) || !(num.test(value))) {
                        callback(new Error('请输入大于等于0的数,且最多两位小数'));
                    } else {
                        callback();
                    }
                } else if (ruleField === 'weight') {
                    let num = /^([1-9]\d*)/;
                    value = '' + value;
                    if (isNaN(value) || !(num.test(value))) {
                        callback(new Error('请输入大于0的整数'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            },
            ruleType: '1',
            drag_open: true,
            indexRow: '',
            topTimes: 0, // 当前页面置顶操作的次数
            series_spu_list: [],
            current_spu_list: [],
            smartFormVisible: false,
            drawer1Visible: false,
            smart: {
                ruleCondition: 'AND',
                ruleList: [{ruleField: '', operator: '', ruleValue: ''}]
            },
            tableLoading: false,
            totalElements: 0,
            productList: [],
            chooseProductList: [],
            seriesOptions: [{id: '', name: '全部系列'}],
            publishStatus: [
                {key: '', name: '全部状态'},
                {key: 1, name: '上架'},
                {key: 0, name: '下架'},
                {key: -1, name: '未上架'}
            ],
            pageSearch: {
                page: 1,
                pageSize: 20,
                spuSeries: '',
                spuType: '',
                published: '',
                spuName: '',
                spuCode: '',
                notSpuIdList: ''
            },
            searchGoods: [],
            lockGood: [],
            filterGoodName: '',
            searchModel: false
        };
    },
    methods: {
        add: function () {
            this.list.push({ name: 'Juan' });
        },
        replace: function () {
            this.list = [{ name: 'Edgard' }];
        },
        clone: function (el) {
            return {
                name: el.name + ' cloned'
            };
        },
        log: function (evt) {
            window.console.log(evt);
        },
        initData () {
            this.loadingPic = true;
            getSeries(this.siteId, this.series.id).then(res => {
                this.series = res.data;
                this.smart.ruleCondition = this.series.ruleCondition;
                this.series_spu_list = res.data.spuList;
                this.loadingPic = false;
                this.lockGood = this.series_spu_list.filter(s => s.top).map(v => v.spuId);
                // this.loadingAllSpuWithSeriesRule();
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (name) {
            this.isEdit = false;
            this.submitLoading = true;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.series.siteId = this.siteId;
                    // if (this.series.seriesType === 'automatic') {
                    //     if (this.series.ruleCondition == null || this.series.ruleCondition === '') {
                    //         this.$message.error('请设置有效的逻辑条件');
                    //         return false;
                    //     }
                    //     if (this.series.ruleList == null || this.series.ruleList.length <= 0) {
                    //         this.$message.error('请设置有效的逻辑条件');
                    //         return false;
                    //     }
                    // }
                    const arr = [];
                    this.series_spu_list.map(res => arr.push({id: res.id, spuId: res.spuId, top: res.top || false}));
                    this.series.spuList = this.series_spu_list;
                    this.series.seriesSpuSort = arr;
                    modifySeries(this.series).then(res => {
                        this.submitLoading = false;
                        this.$message.success('修改成功');
                        this.$router.push({name: 'series-list'});
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset (name) {
            this.$router.push({name: 'series-list'}).catch(() => {
            });
        },
        addSeriesRule () {
            this.smart.ruleList.push({
                ruleField: '', operator: '', ruleValue: ''
            });
        },
        removeSeriesRule (index) {
            this.smart.ruleList.splice(index, 1);
        },
        loadingAllSpuWithSeriesRule () {
            if (this.series.ruleCondition == null || this.series.ruleCondition === '') {
                this.$message.error('请先设置好逻辑条件！');
                return false;
            }
            let params = {
                siteId: this.siteId,
                seriesId: this.series.id,
                seriesRuleList: [],
                spuSort: this.series.spuSortType,
                ruleCondition: this.series.ruleCondition,
                spuIdList: this.series_spu_list.map((res) => { return {spuId: res.spuId, top: res.top}; }),
                topSpuIdList: this.lockGood
            };
            if (this.series.ruleList != null && this.series.ruleList.length > 0) {
                let tempRuleList = [];
                this.series.ruleList.forEach(item => {
                    if (item.ruleField == null || item.ruleField === '') {
                        return false;
                    }
                    if (item.operator == null || item.operator === '') {
                        return false;
                    }
                    if (item.ruleValue == null || item.ruleValue === '') {
                        return false;
                    }
                    tempRuleList.push(item);
                });
                if (tempRuleList.length <= 0) {
                    this.$message.error('请设置有效的逻辑条件');
                    return false;
                }
                params.seriesRuleList = tempRuleList;
            }
            this.loadingPic = true;
            getAllSeriesSpuList(params).then(res => {
                this.series_spu_list = res.data;
                this.changeSpuSort(this.series.spuSortType, true);
                console.log(this.series_spu_list);
                this.loadingPic = false;
                // console.log(res.data);
            });
        },
        uploadAllSpuWithSeriesRule () {
            let params = {
                seriesId: this.series.id,
                sortCode: this.series.spuSortType
            };
            getSortWhenOption(params).then(res => {
                this.series_spu_list = res.data;
            });
        },
        closeSmartForm () {
            // this.smart.ruleCondition = '';
            this.smartFormVisible = false;
            // this.smart.ruleList = [{ruleField: '', operator: '', ruleValue: ''}];
        },
        saveSeriesRule (name) {
            // 重新筛选以后 置顶的商品要保存

            this.isEdit = false;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.smartFormVisible = false;
                    this.series.ruleList = this.smart.ruleList;
                    this.series.ruleCondition = this.smart.ruleCondition;
                    this.loadingAllSpuWithSeriesRule();
                } else {
                    this.$message.error('请正确填写！');
                }
            });
        },
        showSmartForm () {
            this.smartFormVisible = true;
            this.smart.ruleCondition = this.series.ruleCondition;
            if (this.series.ruleList && this.series.ruleList.length > 0) {
                this.smart.ruleList = this.series.ruleList;
            } else {
                this.smart.ruleList = [{ruleField: '', operator: '', ruleValue: ''}];
            }
        },
        compare (p, type) { // 这是比较函数
            return function (m, n) {
                const a = m[p];
                const b = n[p];
                if (type === 'DESC') {
                    return b - a; // 升序
                } else {
                    return a - b; // 升序
                }
            };
        },
        changeSpuSort (data, flag = false) {
            const sortType = {
                createDate_DESC: {
                    name: 'createTimeLong',
                    sort: 'DESC'
                },
                sellPrice_ASC: {
                    name: 'sellPrice',
                    sort: 'ASC'
                },
                sellPrice_DESC: {
                    name: 'sellPrice',
                    sort: 'DESC'
                },
                salesQty_DESC: {
                    name: 'salesQty',
                    sort: 'DESC'
                },
                virtualSalesQty_DESC: {
                    name: 'virtualSalesQty',
                    sort: 'DESC'
                },
                handle_sort: {}
            };
            if (this.series_spu_list.length) {
                // 获取指定商品
                const lockGood = this.series_spu_list.filter(s => s.top);
                const unLockGoods = this.series_spu_list.filter(s => !s.top);
                const sortGoods = unLockGoods.sort(this.compare(sortType[data].name, sortType[data].sort));
                this.lockGood = lockGood.map(res => res.spuId);
                if (data !== 'handle_sort' && !flag) {
                    this.series_spu_list = lockGood.length ? [...lockGood, ...sortGoods] : sortGoods;
                } else {
                    this.series_spu_list = lockGood.length ? [...lockGood, ...unLockGoods] : unLockGoods;
                }
            }
        },
        getAllSeries () {
            let json = {
                page: 1,
                pageSize: 1000,
                siteId: this.siteId
            };
            getSeriesPage(json).then(res => {
                this.seriesOptions = [{id: '', name: '全部系列'}, ...res.records];
            });
        },
        handleOpenDraw (name) {
            this[name] = true;
            if (name === 'drawer1Visible') {
                this.getAllSeries();
                this.searchSpuInfo(true);
            } else {
                this.smart.ruleList = (this.series.ruleList && this.series.ruleList.length) ? this.series.ruleList : [{
                    ruleField: '',
                    operator: '',
                    ruleValue: ''
                }];
            }
        },
        handleSelectionChange (rows, row) {
            let selected = rows.length && rows.indexOf(row) !== -1;
            let obj = {};
            let data = [...this.chooseProductList, ...rows].reduce((cur, next) => {
                // eslint-disable-next-line no-unused-expressions
                obj[next.id] ? '' : obj[next.id] = true && cur.push(next);
                return cur;
            }, []);
            const index = data.findIndex(s => s.id === row.id);
            if (!selected) {
                data.splice(index, 1);
            }
            this.chooseProductList = data;
        },
        handleSelectionChangeAll (rows) {
            this.chooseProductList = rows;
        },
        searchSpuInfo (flag = false) {
            if (flag) {
                this.pageSearch.page = 1;
            }
            this.tableLoading = true;
            this.pageSearch.siteId = this.siteId;
            this.pageSearch.notSpuIdList = this.series_spu_list.length ? this.series_spu_list.map(res => res.spuId).join(',') : '';
            getSpuPage(this.pageSearch).then(res => {
                this.productList = flag ? res.records : this.productList.concat(res.records);
                this.totalPage = res.totalpage;
                this.tableLoading = false;
                console.log(this.chooseProductList);
                this.$nextTick(() => {
                    const list = this.productList.filter(s => this.chooseProductList.some(n => n.id === s.id));
                    list.forEach(index => {
                        this.$refs.multipleTable.toggleRowSelection(index, true);
                    });
                });
            });
        },
        resetSearchInfo () {
            this.pageSearch = {
                page: 1,
                pageSize: 20,
                spuSeries: '',
                published: '',
                spuCode: '',
                spuName: '',
                notSpuIdList: ''
            };
            this.searchSpuInfo(true);
        },
        closeDrawerAndSaveData () {
            this.series.seriesType = 'manual';
            this.drawer1Visible = false;
            this.series_spu_list = this.series_spu_list.concat(this.chooseProductList);
            this.productList = [];
            this.chooseProductList = [];
            this.changeSpuSort(this.series.spuSortType);
        },
        loadMore () {
            // console.log('el-table 已经滚到底部');
            this.pageSearch.page++;
            if (this.pageSearch.page > this.totalPage) {
                return;
            }
            this.searchSpuInfo();
        },
        handleDragUpdate (event) {
            this.lockGood = this.series_spu_list.filter(s => s.top).map(v => v.spuId);
            this.series.spuSortType = 'handle_sort';
            // if (event.type === 'drag') {
            //     this.series.spuSortType = 'handle_sort';
            // }
        },
        handleDragsearchGoodsUpdate (event) {
            this.series.spuSortType = 'handle_sort';
            const sItem = this.series_spu_list.find(res => res.spuId === event.item.spuId);
            console.log(event);
            if (event.type === 'del') {
                this.$refs.dragSeries.actionDelTop(sItem);
                if (!this.searchGoods.length) {
                    this.filterGoodName = '';
                }
            } else {
                this.$refs.dragSeries.updateLocation(sItem, event.flag);
            }
        },
        handleClearVal () {
            this.searchGoods = [];
            this.searchModel = false;
        },
        handleSearch () {
            const name = this.filterGoodName.split(',').map(s => s.toLowerCase());
            if (this.filterGoodName) {
                const goods = deepClone(this.series_spu_list);
                this.searchGoods = goods.filter(res => (res.spuName && name.some(l => res.spuName.toLowerCase().indexOf(l) > -1)) || (res.spuCode && name.some(l => res.spuCode.toLowerCase().indexOf(l) > -1)));
                this.searchModel = true;
            }
        },
        handleRest () {
            this.searchGoods = [];
            this.filterGoodName = '';
            this.searchModel = false;
        }
    },
    mounted () {
        this.initData();
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        currencyType () {
            return this.siteInfo.currencyType;
        }
    }
};
</script>

<style scoped lang="scss">
.groups-conditions {
  display: flex;
  align-items: center;

  .item {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}

.sorting-panel {
  .search {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .inline-item {
      width: 200px;
    }
  }

  .list-wrap {
    > div {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .image-item {
      position: relative;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #c0ccda;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      width: 200px;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 10px;

      .img {
        position: relative;
        height: 148px;

        img {
          width: 148px;
          height: 148px;
          object-fit: cover;
        }

        &:hover {
          .label {
            display: flex;
          }
        }
      }

      .title {
        height: 36px;
        margin: 5px 0;
        color: #30344f;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        width: 100%;
      }

      .label {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 32px;
        text-align: center;
        position: absolute;
        bottom: 0;
        background-color: #000000;
        color: white;
        opacity: 0.6;
        display: none;
        line-height: 32px;
      }
    }
  }
}

.collection {
  &-header {
    border-bottom: 1px solid #dedede;
    padding-bottom: 20px;
    margin-bottom: 4px;
  }

  .collection_bottom {
    display: flex;
    align-content: center;
    justify-content: space-between;

    &_search {
      padding-top: 20px;
    }
  }

  .collection_mode {
    padding: 20px 20px 48px;
    color: #7e849c;
    background-color: #fff;

    .collection_mode_title {
      span {
        font-size: 16px;
        color: #30354d;
        padding-right: 10px;
      }
    }

    .collection_mode_btn_wrapper {
      padding-top: 20px;
      display: flex;

      .collection_mode_btn {
        width: 300px;
        padding: 20px 30px;
        white-space: normal;
        background: #ffffff;
        border: 1px solid #ccd3df;
        border-radius: 4px;
        margin-right: 20px;
        min-height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        position: relative;
        user-select: none;

        .title {
          color: #30344f;
          padding-bottom: 12px;
        }

        .desc {
          color: #7e849c;
          font-size: 14px;
        }
      }
    }
  }
}

.region-setting-panel {
  .footer {
    z-index: 222;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: #eef0f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
  }
}
</style>
